<template>
  <div class="app-content">
    <div class="fix-top">
      <div class="search-block">
        <img
          src="../../assets/img/home/search-icon.png"
          alt=""
          class="search-icon"
        />
        <input
          type="text"
          class="search-inp"
          placeholder="请输入搜索位置"
          id="searchInp"
          @input="searchWord"
          v-model="keyword"
          autocomplete="off"
        />
      </div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="list"
    >
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="goHome(item)"
      >
        <img
          src="../../assets/img/home/address_icon.png"
          class="address-icon"
        />
        <div class="info">
          <div class="location">{{ item.title }}</div>
          <div class="address" v-if="item.type == 'address'">
            {{ item.address }}
          </div>
        </div>
      </div>
    </van-list>
    <div id="map"></div>
  </div>
</template>

<script>
import gcoord from "gcoord";
import { mapMutations } from "vuex";
import enterpriseListApi from "@/apis/enterprise-list";
export default {
  data() {
    return {
      list: [],
      totalPage: 0,
      currentPage: 0,
      pageSize: 10,
      local: null,
      loading: false,
      finished: false,
      keyword: "",
      timer: null,
      jumpUrl: "",
      type: "",
      pageNumber: 1,
      lyFinish: false,
      addressFinish: false,
    };
  },
  methods: {
    ...mapMutations("building", ["setSearchPolygon"]),
    resetSearchParams() {
      this.list = [];
      this.pageNumber = 1;
      this.currentPage = 0;
      this.finished = false;
      this.lyFinish = false;
      this.addressFinish = false;
    },
    async getLyList() {
      if (!this.keyword) {
        return;
      }
      let res = await enterpriseListApi.getDsLySwlyList({
        name: `%${this.keyword}%`,
        pageNumber: this.pageNumber,
      });
      if (res.errcode == 0 && res.data) {
        let list = res.data.content.map((v) => {
          return {
            ...v,
            title: v.name,
            type: "buildiing",
            centerPoint: gcoord.transform(
              v.geocenter84
                .replace("POINT(", "")
                .replace(")", "")
                .split(" ")
                .map((v) => +v),
              gcoord.WGS84,
              gcoord.BD09
            ),
            polygonFormat: v.geom84
              .replace("POLYGON((", "")
              .replace("))", "")
              .split(",")
              .map((v) => {
                return gcoord.transform(
                  v.split(" ").map((v) => +v),
                  gcoord.WGS84,
                  gcoord.BD09
                );
              }),
          };
        });
        if (!list.length) {
          this.lyFinish = true;
          if (
            (this.lyFinish && this.addressFinish) ||
            (this.addressFinish && this.type != "building")
          ) {
            this.finished = true;
          }
        }
        this.list = this.list.concat(list);
      }
    },
    goHome(item) {
      let { center, title, geom84 } = item;
      let type = "polygon";
      let url = this.jumpUrl + "?keyword=" + title;
      if (center) {
        type = "point";
        url += `&lng=${center[0]}
          &lat=${center[1]}
          `;
      }
      url += "&type=" + type;
      console.log(item);
      this.setSearchPolygon(item);
      this.$router.push(url);
    },
    onLoad() {
      if (!this.keyword) {
        this.finished = true;
        return;
      } else {
        this.finished = false;
      }
      this.currentPage++;
      this.pageNumber++;
      if (!this.lyFinish && this.type == "building") {
        this.getLyList();
      }
      if (!this.addressFinish) {
        this.local.gotoPage(this.currentPage);
      }
      console.log(this.currentPage);
      console.log(this.pageNumber);
    },
    searchWord(e) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.resetSearchParams();
        let that = this;
        if (!e.target.value) {
          this.finished = true;
        } else {
          this.finished = false;
        }
        let options = {
          onSearchComplete: function (results) {
            console.log(results);
            that.loading = false;
            if (results) {
              that.totalPage = results.getNumPages();
              that.total = results.getNumPois();
              if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                for (var i = 0; i < results.getCurrentNumPois(); i++) {
                  that.list.push({
                    title: results.getPoi(i).title,
                    address: results.getPoi(i).address,
                    center: [
                      results.getPoi(i).point.lng,
                      results.getPoi(i).point.lat,
                    ],
                    type: "address",
                  });
                }
              }
            } else {
              that.finished = true;
              that.addressFinish = true;
              if (
                (that.lyFinish && that.addressFinish) ||
                (that.addressFinish && that.type != "building")
              ) {
                that.finished = true;
              }
              console.log(that.list);
            }
          },
        };
        let local = new BMapGL.LocalSearch(this.Map, options);
        this.loading = true;
        local.setPageCapacity(30);
        local.search(e.target.value, { forceLocal: true });
        this.local = local;
        if (this.type == "building") {
          this.getLyList();
        }
      }, 500);
    },
  },
  created() {
    let { type } = this.$route.query;
    this.type = type;
    this.$nextTick(() => {
      this.Map = new BMapGL.Map("map");
      this.Map.centerAndZoom("广州市", 12);
    });
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => (vm.jumpUrl = from.path));
  },
};
</script>

<style lang="scss" scoped>
.app-content {
  min-height: 100vh;
  background-color: #f8f9fa;
  .fix-top {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background-color: #ffffff;
    .search-block {
      display: flex;
      align-items: center;
      width: 343px;
      height: 36px;
      background: #f3f5f8;
      border-radius: 4px;
      padding: 0 16px;
      box-sizing: border-box;
      .search-icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }
      input::placeholder {
        /* Edge */
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
      input::-webkit-input-placeholder {
        /* WebKit browsers */
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
      input:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
      .search-inp {
        width: 289px;
        background-color: #f3f5f8;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #222222;
        // line-height: 16px;
        height: 32px;
      }
    }
  }
  .list {
    padding-left: 24px;
    padding-right: 17px;
    margin-top: 7px;
    background-color: #ffffff;
    .item {
      display: flex;
      align-items: flex-start;
      padding-top: 14px;
      padding-bottom: 17px;
      border-bottom: 1px solid #f3f5f8;
      .address-icon {
        width: 24px;
        height: 24px;
        margin-right: 6px;
        margin-top: -5px;
      }
      .info {
        .location {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 16px;
          margin-bottom: 3px;
        }
        .address {
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 14px;
        }
      }
    }
  }
}
</style>